<div class="wrapper">
  <h3>Status</h3>
  <div *ngIf="isLoading | async;else content">
    <mat-spinner class="loading-spinner"></mat-spinner>
  </div>
  <ng-template #content>
    <table mat-table [dataSource]="screens$"  class="mat-elevation-z8">
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef>Actions</th>
        <td mat-cell *matCellDef="let screen">
          <button mat-icon-button color="warn" (click)="suspendScreen(screen)" matTooltip="Suspend Screen">
            <mat-icon>stop</mat-icon>
          </button>
      </ng-container>
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Screen-Name</th>
        <td mat-cell *matCellDef="let screen">{{screen.screenName}}</td>
      </ng-container>
      <ng-container matColumnDef="isPaused">
        <th mat-header-cell *matHeaderCellDef>Status</th>
        <td mat-cell *matCellDef="let screen">
          <mat-chip-list>
            <ng-template [ngIf]="!screen.isPaused && !screen.ended" [ngIfElse]="elseBlock">
              <ng-template [ngIf]="!screen.repeat" [ngIfElse]="repeatBlock">
                <mat-chip style="background-color: forestgreen;">Playing</mat-chip>
              </ng-template>
              <ng-template #repeatBlock>
                <mat-chip style="background-color: forestgreen;">Repeating</mat-chip>
              </ng-template>
            </ng-template>
            <ng-template #elseBlock>
              <ng-template [ngIf]="screen.isPaused && !screen.ended" [ngIfElse]="elseBlock2">
                <mat-chip color="accent">Paused</mat-chip>
              </ng-template>
              <ng-template #elseBlock2>
                <mat-chip>Ended</mat-chip>
              </ng-template>
          </ng-template>
          </mat-chip-list>
         </td>
      </ng-container>
      <ng-container matColumnDef="currentTime">
        <th mat-header-cell *matHeaderCellDef>Current Time</th>
        <td mat-cell *matCellDef="let screen">{{screen.currentTime | minuteSeconds}}</td>
      </ng-container>
      <ng-container matColumnDef="duration">
        <th mat-header-cell *matHeaderCellDef>Duration</th>
        <td mat-cell *matCellDef="let screen">{{screen.duration | minuteSeconds}}</td>
      </ng-container>
      <ng-container matColumnDef="currentSource">
        <th mat-header-cell *matHeaderCellDef>Currently Playing</th>
        <td mat-cell *matCellDef="let screen">{{screen.currentSource}}</td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </ng-template>
  <div class="fab-container">
    <button mat-fab class="md-fab-right" matTooltip="Refresh" (click)="refresh()" color="accent">
      <mat-icon>refresh</mat-icon>
    </button>
  </div>
</div>
